<template>
    <div>
        <!-- 搜索条件 --><br>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-left: 10px;">
            <el-form-item label="用户名">
                <el-input v-model="formInline.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-input v-model="formInline.department" placeholder="所属部门"></el-input>
            </el-form-item>
            <el-form-item label="登录状态">
                <el-select v-model="formInline.accountStatus" placeholder="登录状态">
                    <el-option v-for="item in statusList" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属角色">
                <el-select v-model="formInline.role" placeholder="所属角色">
                    <el-option v-for="item in roleList" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="最后登录">
                <el-date-picker v-model="formInline.lastLogin" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="最后登录">
                </el-date-picker>
            </el-form-item><br>
            <el-form-item style="padding-left: 10px;">
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="default" icon="el-icon-refresh" @click="onReset">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteAll">删除</el-button>
            </el-form-item>
        </el-form>

        <!-- 层级数据 -->
        <el-table :data="tableData" stripe style="width: 100%" default-expand-all :tree-props="{ children: 'children' }">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="employeeCode" label="职员编号" width="180">
            </el-table-column>
            <el-table-column prop="employeeName" label="职员姓名" width="180">
            </el-table-column>
            <el-table-column prop="position" label="职位">
            </el-table-column>
            <el-table-column prop="supervisorId" label="上级编号">
            </el-table-column>
            <el-table-column prop="hireDate" label="入职日期">
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间">
            </el-table-column>
            <el-table-column prop="updatedAt" label="更新时间">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button type="text" size="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" size="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getTree, deleteOrganization, updateOrganization, addOrganization, getPositon, deleteBatch, getOrganization } from '@/api/organization'

export default {
    name: 'Role',

    data() {
        return {
            tableData: [],
            formInline: {
                username: '',
                department: '',
                accountStatus: '',
                role: '',
                lastLogin: ''
            },
        }
    },

    methods: {
        fetchData() {
            getTree().then(response => {
                console.log("getOrganizationList, response", response)
                this.tableData = response.data[0].children;
            })
        },

        // 查询
        onSubmit() {
            let params = this.formInline;
            getOrganization(params)
            .then(response => {
                console.log("getOrganization, response", response)
                this.tableData = response.data.list;
            })
        },

        // 重置
        onReset() {
            this.formInline = {
                username: '',
                department: '',
                accountStatus: '',
                role: '',
                lastLogin: ''
            }
            this.fetchData();
        },

        // 新增
        handleAdd() {
            this.$router.push({ path: '/system/organization/add' })
        },

        // 编辑
        handleEdit(index, row) {
            this.$router.push({ path: '/system/organization/edit', query: { id: row.id } })
        },

        // 删除
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteOrganization(row.id)
                .then(response => {
                    this.$message({
                        type: 'info',
                        message: '删除成功!'
                    })
                    this.fetchData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        // 批量删除
        handleDeleteAll() {
            const rows = this.$refs.table.selection;
            if (rows.length === 0) {
                this.$message.warning('请选择需要删除的行');
                return;
            }
            this.$confirm('此操作将永久删除所选信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = [];
                rows.forEach(row => {
                    ids.push(row.id);
                });
                deleteBatch(ids)
                .then(response => {
                    this.$message({
                        type: 'info',
                        message: '删除成功!'
                    })
                    this.fetchData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

    },

    created() {
        this.fetchData();
    }
}
</script>